<template>
  <div class="language-switcher">
    <el-dropdown 
      @command="handleLanguageChange"
      placement="bottom-end"
      trigger="hover"
    >
      <span class="language-current">
        {{ currentLanguage.flag }} {{ currentLanguage.name }}
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="lang in SUPPORTED_LOCALES" 
            :key="lang.code" 
            :command="lang.code"
          >
            <div class="language-option">
              <span class="flag">{{ lang.flag }}</span>
              <span class="name">{{ lang.name }}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ArrowDown } from '@element-plus/icons-vue'
import { SUPPORTED_LOCALES, switchLanguage } from '../i18n'

const { locale } = useI18n()

const currentLanguage = computed(() => {
  return SUPPORTED_LOCALES.find(lang => lang.code === locale.value) || SUPPORTED_LOCALES[0]
})

const handleLanguageChange = async (lang) => {
  await switchLanguage(lang)
}
</script>

<style scoped lang="scss">
.language-switcher {
  margin-left: auto;
  padding-right: 24px;
  
  .language-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s;
    color: var(--el-color-primary);
    
    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  min-width: 120px;
  
  &:hover {
    background-color: var(--el-color-primary-light-9);
  }
  
  .language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .flag {
      font-size: 1.2em;
    }
    
    .name {
      font-size: 14px;
      color: var(--el-text-color-primary);
    }
  }
}
</style>
